﻿@{
    ViewBag.Title = "About";
}<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/text.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<style type="text/css">
    .container {
        min-width: 1092px;
        /*background-color: grey;*/
    }
    .middle{
        width:100%;
        height:auto;
        margin:0 auto;
        max-width:1140px;
    }
    .articles{
        height: 200px;
        /*background-color:red;*/
    }
   .middle .articles .content{
       min-width:600px;
       /*border:1px solid red;*/
       float:left;
       margin-left:20px;
   }
   
   /*以上是模块的整体的布局*/
    .t_nav {
        height: 65px;
        border-bottom: 1px solid grey;
    }
   .t_nav a{
       display:inline-block;
       width:110px;
       line-height:50px;
       background:#00ff21;
       text-align:center;
       font-size:18px;
       margin-top:13px;
   }
   .t_nav span{
       color:#808080;
       float:right;
       display:inline-block;
       line-height:20px;
       margin:20px 0;
   }
   ul.data_list{
       width:800px;
       list-style:none;
      
   }
    ul.data_list li {
        display:block;
        height: auto;
        background: #f8f8f8;
        box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(214, 214, 214, 0.7);
        margin-top: 10px;
        border-radius: 6px;
        position: relative;
      
    }
    ul.data_list li:hover{
        cursor:pointer;

    }
    ul.data_list li span {
        position: absolute;
        left:860px;
        top: 20px;
        width: 125px;
        line-height: 30px;
        background: #5EA51B;
        border-radius: 0px 40px;
        text-align: center;
        color: #fff;
    }
    p#motto{
        font-size:20px;
        font-weight:400;
        line-height:26px;
        /*margin-left:250px;*/
        width:300px;
        margin:10px 0 20px 250px; 
    }
    .footer {
        margin-top: 0px;
        height: 40px;
        border-top: 0.1px solid grey;
        text-align: center;
    }
     .footer a {
      display: inline-block;
      margin-top: 10px;
      text-decoration: none;
      color: grey;
      font: 20px;
        }
      .footer a:hover {
            text-decoration: underline;
            color: blue;
            cursor: pointer;
       }
     
      .cur{
          color:orange !important;
          font-weight:500;
      }
      .change p{
         
          width:500px;
          line-height:30px;
          font-size:14px;
          margin:10px;
          padding-top:20px;
          padding-bottom:20px;
          /*float:right;*/
      }
      .change img{
          width:140px;
          height:130px;
          margin:20px  20px;
      }
      p#name{
          margin-left:700px;
      }
      .head .title{
          height:60px;
          font-size:30px;
          padding:15px 0;
          text-align:center;
          font-weight:bold;
      } 
      .title:hover{
          cursor:pointer;
      }
      .h_nav{
          display:block;
          border-radius:15px;
      }
</style>
<div class="container">
    <div class="head row">
        <div class="col-md-12">
            <div class="title">Welcome to ltt's blog</div>
        </div>
    </div>
    <div class="middle row">
        <div class="t_nav col-md-12">
            <a href="/" class="h_nav">网站首页</a>
            <a href="#" class="h_nav" style="background-color:#00ff90">关于作者</a>
            <span>人总会犯的两个错误：一是看低别人，一是看低自己.</span>
        </div>
       <div class="articles row">
           <div class="content col-md-11">
               <p id="motto">总相信，出来混迟早是要还的</p>
               <p id="name">作者：李婷婷</p>
               <ul class="data_list">
                   <li>
                       <div class="change">
                           <p>再次准备六级，何时能跳出六级的坑~~~~</p>
                       </div>
                       <span>2017-05-05</span>
                   </li>
                   <li>
                       <div class="change">
                           <img src="~/Content/Image/Logo_img.png" class="img-circle" />
                            <p style="float:right">越临近大三的期末，越觉得工作的压力感。我想这个时候有自己的方向是最重要的，一旦方向确定了
                           无论你走的多么慢，总还是在前进；每一周给自己定一些计划,始终相信厚积薄发。</p>
                       </div>          
                           <span>
                               2017-05-04
                           </span>
                       
                   </li>
                   <li>
                       <div class="change">
                           <img src="~/Content/Image/cute.png"class="img-circle" />
                           <p style="float:right"> 喜欢一个人，始于颜值，陷于才华，终于人品。</p>
                       </div>
                       <span>
                          2017-02-09
                       </span>
                   </li>
                   <li>
                       <div class="change">
                           <p>总是无比的怀念高三，那奋笔疾书的日子。</p>
                       </div>
                       <span>
                          2016-12-5
                       </span>
                   </li>
                   <li>
                       <div class="change">
                           <p style="width:auto">每个人都会有一段异常艰难的时光，生活的窘迫，工作的失意，学业的压力，爱的惶惶不可终日。挺过来的，人生就会豁然开朗；
                           挺不过来的，时间也会教会你怎么与它们握手言和，所以你都不必害怕的。</p>
                       </div>
                       <span>
                          2016-06-07
                       </span>
                   </li>
               </ul>
           </div>
       </div>
    
    </div>
    <div class="row footer">
        <div class="col-md-12 footer">
            <a>copyRight@Ting ting Li 18408245708@163.com</a>
        </div>
    </div>
</div>
<script>
    //悬浮到li标签的时候，对应的span标签里面的颜色改变
    $(document).ready(function () {
        var n;
        var divs = $(".change", ".data_list");
        var spans = $("span", ".data_list");
        $("li", ".data_list").mouseenter(function (ev) {
            n = $(this).index();//得到当前li的下标
            $(spans).eq(n).addClass("cur");
            $("li",".data_list").mouseleave(function () {
                $(spans).eq(n).removeClass("cur");
            })
          
        })
       
    })
</script>









@*<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Use this area to provide additional information.</p>*@
